
<template>
    <div class="listen">
        <!-- 最上面 -->
        <div class="hua">
            <div class="hot" v-for="(item, index) in categories" :key="index" :class="index === isShow && `active`"
                @click="changeTab(index, item.name)">

                <text>{{ item.title }}</text>

            </div>
        </div>

        <!-- 1111点击面板 -->
        <div class="pp">
            <div class="dd">
                <text  @click="chencgaonan">111111111111111</text>

            </div>
            <div class="hot" v-show="ccc" >

                <div class="one" v-for="(item, index) in categories" :key="index" :class="index === aaa && `active`"
                @click="changeTab(index, item.name)">

                    <text @click="bbb">{{ item.title }}</text>

                </div>
            </div>
        </div>
<!-- 下面图片 -->
        <div class="left" v-for="(item, index) in subjects">
            <a :href="`https://m.ximalaya.com/${item.url}`">
                <img :src="item.coverImgUrl" />
            </a>
            <div class="right">
                <text>{{ item.intro }}</text>
                <div class="bottom">
                    <div class="text">{{ item.dataCount }}</div>
                    <div class="new">2021-8-27更新</div>

                </div>
            </div>
        </div>

        
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import listenApi, { type CateModel } from '@/api/listen'


// const flag =(0)
const page = ref<any>(1);
const categories = ref([])
// const title=('')
const pageNum = (1)
const pageSize = (20)
const isShow = ref<number>(0)

const id = ref<number>()

const aaa = ref<number>()
const subjects = ref<any>([])
onMounted(() => {
    getListen()
    getList()
})
// 分类第一个
const getListen = async (cid: any) => {
    let result = await listenApi.reqListen(cid)
    // console.log(result)
    categories.value = result.categories
    // console.log(categories.value)

}

const flag = ref<any>('')
// 分类第二个
const getList = async (name: any) => {
    let result = await listenApi.reqList(name, pageNum, pageSize)
    console.log(result)
    subjects.value = result.subjects
//    console.log(result.subjects)
    // console.log(subjects.value)

    subjects.value?.push(...result.subjects)
    if(subjects.value.length == 20){
        flag.value ='more'
    }else{
        flag.value ='nomore'
    }
}
onMounted(()=>{
    if(flag.value == "more"){
        pageSize.value++;
        getList(name)
    }
})

// 点击最上面 切换
const changeTab = (index: any, name: any) => {
    // console.log(title)
    // console.log(name)
    isShow.value = name
    isShow.value = index
    getList(name)
}

// 1111那里
const ccc = ref(true)
const chencgaonan = ()=>{
    ccc.value = !ccc.value
}
// 1111下拉框
const bbb = () => {
    ccc.value = !ccc.value
}



</script>

<style scoped>
.active {
    color: red;
}

.listen {
    width: 100%;
    height: 100%;

}

.listen .hua {

    display: flex;
    width: 325px;
    height: 45px;
    overflow-x: scroll
}


.listen .pp {}

.listen .pp .hot {}

.listen .pp .dd {
    width: 30px;
}

.listen .hot {
    width: 375px;

}

.listen .pp .hot .one {
    width: 80px;
    height: 22px;
    background-color: gainsboro;
}

.listen .pp .hot text {
    font-size: 16;

}


.listen .hua .hot .active {
    color: red;
}

.listen .hua .hot text {
    font-size: 14px;
    margin-left: 15px;
    white-space: nowrap;
}

.listen .left {
    display: flex;
    width: 360px;
    height: 100px;
}

.listen .left img {
    width: 70px;
    height: 70px;
    margin-top: 15px;
}

.listen .left .right {
    margin-top: 15px;
}

.listen .left .right text {
    font-size: 16px;
    margin-left: 10px;
}

.listen .left .right .bottom {
    display: flex;
    margin-top: 20px;
}

.listen .left .right .bottom .text {
    margin-left: 10px;
}

.listen .left .right .bottom .new {
    margin-left: 10px;
}
</style>